<template>
  <div class="sidebar">
    <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
      <el-radio-button :label="false">展开</el-radio-button>
      <el-radio-button :label="true">收起</el-radio-button>
    </el-radio-group> -->
    <div class="ctl_btn">
      <el-button
        style="width: 100%"
        v-if="isCollapse"
        @click="isCollapse = false"
        icon="el-icon-right"
      ></el-button>
      <el-button
        style="width: 100%"
        v-if="!isCollapse"
        @click="isCollapse = true"
        icon="el-icon-back"
      ></el-button>
    </div>
    <div style="line-height: 15px">
      菜单 {{ memuListVal ? memuListVal : memuListValDefault }}
    </div>
    <div
      :style="{ width: !isCollapse ? '200px' : 'auto' }"
      v-for="item in memuList"
      :key="item.name"
    >
      <el-menu
        router
        default-active="1"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
      >
        <el-submenu index="1" v-if="item.children">
          <template slot="title">
            <i :class="item.icon"></i>
            <span slot="title">{{ item.name }}</span>
          </template>
          <el-menu-item-group v-for="item2 in item.children" :key="item2.path">
            <!-- <span slot="title">分组一</span> -->
            <el-menu-item :index="item2.path">
              <i :class="item2.icon"></i>
              <span>{{ item2.name }}</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item v-else :index="item.path">
          <i :class="item.icon"></i>
          <span slot="title">{{ item.name }}</span>
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  props: ['memuListVal'],
  data() {
    return {
      isCollapse: true,
      memuList: null,
      memuListValDefault: 1,
    }
  },
  watch: {
    memuListVal: {
      handler(newVal) {
        console.log(newVal)
      },
      deep: true,
      immediate: false,
    },
  },
  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath)
    },
  },
  created() {
    this.memuList = this.getCache('router')
    // console.log(this.memuList)
    for (let i = 0; i < this.memuList.length; i++) {
      if (this.memuList[i].path == '/404') {
        this.memuList.splice(i, 1)
      }
      if (this.memuList[i].path == '*') {
        this.memuList.splice(i, 1)
      }
    }
    // console.log(this.memuList)
  },
}
</script>

<style lang="scss">
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.sidebar {
  text-align: left;
}
.ctl_btn {
  line-height: 40px;
  // display: inline-block;
  // position: absolute;
  // height: 40px;
  // top: 0;
}
</style>
